var btn = document.getElementById('btn');
//获取父级的main
var main = document.querySelector('.main');
//定义颜色
var colors = ['red', 'green', 'skyblue', 'black'];
var speed = 5; //初始速度
var num = 0; //得分
var timer = null; //定时器
var flag = true;


btn.onclick = function() {
    this.style.display = 'none';
    move();
};
// 创建方块
function createDiv() {
    var row = document.createElement('div');
    row.className = 'row';

    //随机数   0-3的索引值
    var index = Math.floor(Math.random() * 4); //Math.round 可能会出现4，因此不能用

    //创建四列div（4个方块）
    for (var i = 0; i < 4; i++) {
        var div = document.createElement('div');

        //给方块上色  通过随机的索引值
        if (i == index) {
            div.className = 'color';
            div.style.background = colors[i];
        }

        row.appendChild(div);
    }
    //添加行，把行添加到main的里面
    // main.appendChild(row);
    // if (main.children.length == 0) {
    //     //第一次的时候没有子元素，往最后面添加
    //     main.appendChild(row);
    // } else {
    //     //有了子元素  要往最前面添加
    //     main.insertBefore(row, main.children[0]);
    // }
    main.insertBefore(row, main.children[0]);
    //main.children[0]相当于里面没有东西  ，是undefined，所以第一次就相当于是appendChild


}

//运动方块
function move() {
    //为了方便清除,避免重复调用
    clearInterval(timer);
    timer = setInterval(function() {
        main.style.top = parseInt(main.offsetTop) + speed + 'px';
        //创建一行div 但是有个前提条件，就是父级main走到0，才能创建新的一行
        if (parseInt(main.offsetTop) >= 0) {
            //创建div
            createDiv();
            main.style.top = '-150px';
        }


        var len = main.children.length;
        if (len == 6) {
            for (var i = 0; i < 4; i++) {
                if (main.children[len - 1].children[i].classList.contains('color')) {
                    //这个条件成立，说明最后一行有色块
                    alert('游戏结束，您的得分为' + num);
                    clearInterval(timer);
                    flag = false;
                }
            }
            main.removeChild(main.children[len - 1])
        }
    }, 20)
    bindEvent()
}

//给方块添加点击事件
function bindEvent() {
    main.onclick = function(ev) {
        //如果游戏已经结束了  那么下面的代码就不要执行了
        if (!flag) {
            return
        }
        var target = ev.target; //真正的事件源对象
        if (target.className == 'color') {
            target.style.background = '#bbb';
            target.classList.remove('color');

            num++;
        } else {
            //点击白块
            alert('游戏结束，您的得分为' + num);
            clearInterval(timer);
            flag = false;
        }

        //速度变快，规定每隔十分让速度加1;
        if (num % 10 == 0) {
            speed++;
        }
    }
}